<script lang="ts" setup>
import type { ConsultOrderListRow } from '@/types/order_list'
import type { UniLoadMoreStatus } from '@uni-helper/uni-ui-types'
import { ref } from 'vue'

defineProps<{
  orderList: ConsultOrderListRow[]
  status: UniLoadMoreStatus
  refresherTriggered: boolean
}>()
const emit = defineEmits<{
  (e: 'scrolltolower'): void
  (e: 'refresh'): void
}>()
const showMore = ref<number | null>(null)
const IsshowMore = (index: number) => {
  showMore.value = showMore.value === index ? null : index
}
// 添加关闭更多菜单的方法
const closeMore = () => {
  showMore.value = null
}
</script>

<template>
  <scroll-view
    refresher-enabled
    refresher-background="#f6f6f6"
    class="uni-scroll-view"
    scroll-y
    :refresher-triggered="refresherTriggered"
    @scrolltolower="emit('scrolltolower')"
    @refresherrefresh="emit('refresh')"
  >
    <view class="consult-list">
      <view class="consult-list-item" v-for="(item, index) in orderList" :key="item.id">
        <view class="consult-header">
          <view class="label">
            <image class="doctor-avatar" :src="item.docInfo?.avatar" />
            <text>{{ item.docInfo?.name }}</text>
          </view>
          <text
            class="status"
            :class="{
              'color-1': item.status === 1,
              'color-2': item.status === 2 || item.status === 3,
              'color-3': item.status === 4 || item.status === 5,
            }"
            >{{ item.statusValue }}</text
          >
        </view>
        <navigator class="consult-body" hover-class="none" url="/subpkg_consult/order_detail/index">
          <uni-list :border="false">
            <uni-list-item :border="false" title="病情描述" :right-text="item.illnessDesc" />
            <uni-list-item :border="false" title="价格" :right-text="`￥ ${item?.payment}`" />
            <uni-list-item :border="false" title="创建时间" :right-text="item.createTime" />
          </uni-list>
        </navigator>
        <view class="consult-footer">
          <view class="uni-button more" v-if="item.status === 4">
            <text class="label" @click="IsshowMore(index)">更多</text>
            <uni-transition :show="showMore === index">
              <view class="list">
                <view class="list-item">查看处方</view>
                <view class="list-item">删除订单</view>
              </view>
            </uni-transition>
          </view>
          <template v-if="item.status === 1">
            <button class="uni-button minor">取消订单</button>
            <button class="uni-button">去支付</button>
          </template>

          <template v-else-if="item.status === 2">
            <button class="uni-button minor">取消订单</button>
            <button class="uni-button">继续咨询</button>
          </template>

          <template v-else-if="item.status === 3">
            <button class="uni-button">继续咨询</button>
          </template>

          <template v-else-if="item.status === 4">
            <button class="uni-button minor">问诊记录</button>
            <button v-if="item.evaluateId" class="uni-button minor">查看评价</button>
            <button v-else class="uni-button">去评价</button>
          </template>

          <template v-else>
            <button class="uni-button minor">删除订单</button>
            <button class="uni-button">咨询其它医生</button>
          </template>
        </view>
      </view>

      <!-- 加载状态 -->
      <uni-load-more
        v-if="orderList.length === 0"
        :status="status"
        color="#C3C3C5"
        :icon-size="16"
        :content-text="{
          contentdown: '上拉显示更多',
          contentrefresh: '数据正在加载中',
          contentnomore: '没有更多数据了',
        }"
      />
    </view>
  </scroll-view>
</template>

<style lang="scss">
@import './styles.scss';
</style>
